import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
import _createClass from "@babel/runtime/helpers/esm/createClass";
import _inherits from "@babel/runtime/helpers/esm/inherits";
import _createSuper from "@babel/runtime/helpers/esm/createSuper";
import _applyDecoratedDescriptor from "@babel/runtime/helpers/esm/applyDecoratedDescriptor";

var _dec, _dec2, _dec3, _dec4, _dec5, _dec6, _class;

import React from 'react';
import { Bind } from 'lodash-decorators';
import SubMenuWrap from "./SubMenuWrap";
import { MenuContext, menuItemHeight as defaultMenuItemHeight, pageHeaderHeight as defaultPageHeaderHeight, renderIcon, renderMenuTitle } from "./utils";
import styles from "./styles.less?modules";
var MainMenuItem = (_dec = Bind(), _dec2 = Bind(), _dec3 = Bind(), _dec4 = Bind(), _dec5 = Bind(), _dec6 = Bind(), (_class = /*#__PURE__*/function (_React$PureComponent) {
  _inherits(MainMenuItem, _React$PureComponent);

  var _super = _createSuper(MainMenuItem);

  function MainMenuItem(props) {
    var _this;

    _classCallCheck(this, MainMenuItem);

    _this = _super.call(this, props);
    var _props$forceRender = props.forceRender,
        forceRender = _props$forceRender === void 0 ? false : _props$forceRender;
    _this.state = {
      loaded: forceRender,
      subMenuWrapStyle: {} // 默认为控对象

    };
    _this.cacheSubMenuWrapStyle = new Map();
    _this.mainMenuItemRef = React.createRef();
    return _this;
  }

  _createClass(MainMenuItem, [{
    key: "renderMainMenuItemTitle",
    value: function renderMainMenuItemTitle() {
      var menu = this.props.menu;
      return renderMenuTitle(menu);
    } // TODO: 只能cache本一级菜单的样式, 需要提升到 Menu 中

  }, {
    key: "getSubMenuWrapStyle",
    value: function getSubMenuWrapStyle() {
      var mouseTop = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : defaultPageHeaderHeight;
      var _this$props$menuItemH = this.props.menuItemHeight,
          menuItemHeight = _this$props$menuItemH === void 0 ? defaultMenuItemHeight : _this$props$menuItemH;
      var totalHeight;

      if (document.compatMode === 'BackCompat') {
        totalHeight = document.body.clientHeight;
      } else {
        totalHeight = document.documentElement.clientHeight;
      }

      var cacheKey = "".concat(totalHeight, "---").concat(mouseTop);
      var subMenuWrapStyle;

      if (!this.cacheSubMenuWrapStyle.has(cacheKey)) {
        var _this$props$pageHeade = this.props.pageHeaderHeight,
            pageHeaderHeight = _this$props$pageHeade === void 0 ? defaultPageHeaderHeight : _this$props$pageHeade;
        var max = totalHeight - pageHeaderHeight;
        var min = Math.min(totalHeight - mouseTop + menuItemHeight / 2, max);
        subMenuWrapStyle = {
          minHeight: min,
          maxHeight: max
        };
        this.cacheSubMenuWrapStyle.set(cacheKey, subMenuWrapStyle);
      }

      return subMenuWrapStyle || this.cacheSubMenuWrapStyle.get(cacheKey);
    }
  }, {
    key: "handleMainMenuItemClick",
    value: function handleMainMenuItemClick(e) {
      var _this$props = this.props,
          onClick = _this$props.onClick,
          menu = _this$props.menu,
          _this$props$offsetTop = _this$props.offsetTop,
          offsetTop = _this$props$offsetTop === void 0 ? 48 : _this$props$offsetTop;
      var loaded = this.state.loaded;
      var nextPartialState = {
        subMenuWrapStyle: this.getSubMenuWrapStyle( // FIXME: 如何获取元素相对于屏幕的高度距离
        this.mainMenuItemRef.current.offsetTop - this.mainMenuItemRef.current.parentElement.parentElement.scrollTop + offsetTop // e.clientY
        )
      };

      if (!loaded) {
        nextPartialState.loaded = true;
      }

      this.setState(nextPartialState);
      onClick(e, menu);
    }
  }, {
    key: "handleMouseEnter",
    value: function handleMouseEnter(e) {
      var _this$props2 = this.props,
          onHover = _this$props2.onHover,
          menu = _this$props2.menu;
      onHover(e, menu);
    }
  }, {
    key: "handleMouseLeave",
    value: function handleMouseLeave(e) {
      var _this$props3 = this.props,
          onCancelHover = _this$props3.onCancelHover,
          menu = _this$props3.menu;
      onCancelHover(e, menu);
    }
  }, {
    key: "render",
    value: function render() {
      var _this$props4 = this.props,
          menu = _this$props4.menu,
          activeMenus = _this$props4.activeMenus,
          active = _this$props4.active,
          hover = _this$props4.hover;
      var _this$state = this.state,
          loaded = _this$state.loaded,
          subMenuWrapStyle = _this$state.subMenuWrapStyle;
      var classNames = [styles['main-menu-item'], 'cpaas-main-menu-item'];
      var tabMenuActive = menu === activeMenus[0];

      if (tabMenuActive) {
        classNames.push(styles['main-menu-item-hover'], 'cpaas-main-menu-item-tab-active');
      }

      if (active) {
        classNames.push(styles['main-menu-item-active'], 'cpaas-main-menu-item-active');
      }

      if (hover) {
        classNames.push(styles['main-menu-item-hover'], 'cpaas-main-menu-item-hover');
      }

      var menuContentClass = [styles['main-menu-item-content'], 'cpaas-main-menu-item-content'];
      var menuItemTitle = [styles['main-menu-item-title'], 'cpaas-main-menu-item-title'];
      return /*#__PURE__*/React.createElement("li", {
        className: classNames.join(' '),
        onClick: this.handleMainMenuItemClick,
        ref: this.mainMenuItemRef
      }, /*#__PURE__*/React.createElement("div", {
        className: menuContentClass.join(' '),
        key: "main-menu-content",
        onMouseEnter: this.handleMouseEnter,
        onMouseLeave: this.handleMouseLeave
      }, renderIcon(menu), /*#__PURE__*/React.createElement("span", {
        className: menuItemTitle.join(' ')
      }, /*#__PURE__*/React.createElement(MenuContext.Consumer, null, this.renderMainMenuItemTitle))), loaded && /*#__PURE__*/React.createElement(SubMenuWrap, {
        key: "sub-menu-wrap",
        style: subMenuWrapStyle,
        menu: menu,
        activeMenus: activeMenus,
        onLeafMenuClick: this.handleLeafMenuClick
      }), loaded && /*#__PURE__*/React.createElement("div", {
        className: [styles['sub-menu-mask'], 'cpaas-sub-menu-mask'].join(' '),
        onClick: this.handleSubMenuMaskClick
      }));
    }
    /**
     * 菜单右侧mask点击事件
     */

  }, {
    key: "handleSubMenuMaskClick",
    value: function handleSubMenuMaskClick(e) {
      e.stopPropagation();
      var onSubMenuMaskClick = this.props.onSubMenuMaskClick;
      onSubMenuMaskClick();
    }
  }, {
    key: "handleLeafMenuClick",
    value: function handleLeafMenuClick() {
      var onLeafMenuClick = this.props.onLeafMenuClick;
      onLeafMenuClick();
    }
  }]);

  return MainMenuItem;
}(React.PureComponent), (_applyDecoratedDescriptor(_class.prototype, "renderMainMenuItemTitle", [_dec], Object.getOwnPropertyDescriptor(_class.prototype, "renderMainMenuItemTitle"), _class.prototype), _applyDecoratedDescriptor(_class.prototype, "handleMainMenuItemClick", [_dec2], Object.getOwnPropertyDescriptor(_class.prototype, "handleMainMenuItemClick"), _class.prototype), _applyDecoratedDescriptor(_class.prototype, "handleMouseEnter", [_dec3], Object.getOwnPropertyDescriptor(_class.prototype, "handleMouseEnter"), _class.prototype), _applyDecoratedDescriptor(_class.prototype, "handleMouseLeave", [_dec4], Object.getOwnPropertyDescriptor(_class.prototype, "handleMouseLeave"), _class.prototype), _applyDecoratedDescriptor(_class.prototype, "handleSubMenuMaskClick", [_dec5], Object.getOwnPropertyDescriptor(_class.prototype, "handleSubMenuMaskClick"), _class.prototype), _applyDecoratedDescriptor(_class.prototype, "handleLeafMenuClick", [_dec6], Object.getOwnPropertyDescriptor(_class.prototype, "handleLeafMenuClick"), _class.prototype)), _class));
export default MainMenuItem;